<!-- 招聘者 -->
<template>
  <view class="container">
    <template v-if="showConversation">
      <!-- #ifdef MP-WEIXIN -->
      <!-- <tuicalling
		ref="TUICalling"
		id="TUICalling-component"
		:config="config">
	</tuicalling> -->
      <!-- #endif -->
      <view class="tui-chatroom-navigatorbar">
        <!-- <image class="tui-chatroom-navigatorbar-back" src="/static/static/assets/ic_back_white.svg"  @tap="goBack"  />-->
        <u-icon
          name="arrow-left"
          color="#000000"
          class="tui-chatroom-navigatorbar-back"
          @tap="goBack"
        ></u-icon>
        <!-- 先查 remark；无 remark 查 (c2c)nick/(group)name；最后查 (c2c)userID/(group)groupID -->
        <view class="conversation-title">{{ conversationName }}</view>
      </view>

      <view v-if="hlistdata">
        <type-Recruittab
          :hlistdata="hlistdata"
          :tberlist="tberlist"
          @vupopupshow="vupopupshow"
        ></type-Recruittab>
      </view>

      <!-- <view style="flex: 1;font-size: 20rpx;">
					<image src="/static/timimges/jl.png" style="width: 34rpx; height: 41rpx;"></image>
					<view @click="qingk">清空</view>
			</view>
		-->

      <view class="group-profile">
        <TUI-group-profile
          v-if="isShow"
          id="groip-profile"
          :conversation="conversation"
        />
      </view>
      <view class="message-list" @tap="triggerClose" v-if="hlistdata">
        <TUI-message-list
          id="message-list"
          ref="messageList"
          :conversation="conversation"
          @youheadsculpture="youheadsculpture"
          @myheadsculpture="myheadsculpture"
          :hlistdata="hlistdata"
        />
      </view>
      <view v-if="videoPlay" class="container-box" @tap.stop="stopVideoHander">
        <video
          v-if="videoPlay"
          class="video-message"
          :src="videoMessage.payload.videoUrl"
          :poster="videoMessage.payload.thumbUrl"
          object-fit="cover"
          error="videoError"
          autoplay="true"
          direction="0"
        />
      </view>
      <view v-if="showChat" class="message-input">
        <TUI-message-input
          id="message-input"
          ref="messageInput"
          :conversation="conversation"
          @sendMessage="sendMessage"
        />
      </view>

      <!-- 自定义 -->
      <view v-if="upopupshow">
        <u-popup :show="upopupshow" mode="center" :round="10">
          <view class="upopupshownr">
            <view class="upopupshownrtop">
              <text>{{ upopupdata.text }}</text>
            </view>
            <view class="upopupshownrtext">
              <text>{{ upopupdata.textnr }}</text>
            </view>
            <view class="upopupshownrbut">
              <text class="upopupnrbut1" @click="upopupshow = false">取消</text>
              <text class="upopupnrbut2" @click="upopupclick">确定</text>
            </view>
          </view>
        </u-popup>
      </view>

      <view v-if="upopupshowmiashi">
        <Passionateinterview
          :upopupshowmiashi="upopupshowmiashi"
          :Longitude="Longitude"
          :Latitude="Latitude"
          :objlist="objlist"
          @clickbut="clickbut"
        ></Passionateinterview>
      </view>
    </template>
  </view>
</template>

<script>
import logger from "@/utils/logger";
import TUIMessageList from "@/components/tui-chat/message-list/index";
import TUIMessageInput from "@/components/tui-chat/message-input/index";
import TUIGroupProfile from "@/components/tui-group/group-profile/index";
import Passionateinterview from "@/components/tui-chat/customchat/Passionateinterview";
import typeRecruittab from "@/components/tui-chat/customchat/typeRecruittab";

export default {
  components: {
    TUIMessageList, //: () => import("@/components/tui-chat/message-list/index"),
    TUIMessageInput, //: () => import("@/components/tui-chat/message-input/index"),

    TUIGroupProfile,
    typeRecruittab,
    Passionateinterview,
  },
  data() {
    return {
      URL: this.$config.domain.staticUrl,
      conversationName: "",
      conversation: {},
      messageList: [],
      isShow: false,
      showChat: true,
      conversationID: "",
      videoPlay: false,
      videoMessage: {},
      config: {
        sdkAppID: "",
        userID: "",
        userSig: "",
        type: 1,
        tim: null,
      },
      hlistdata: null,
      upopupshow: false,
      upopupshowtext: [
        {
          id: "1",
          text: "提示",
          textnr: "确定申请查看对方的微信号？",
        },
        {
          id: "2",
          text: "提示",
          textnr: "确定申请查看对方的手机号？",
        },
        {
          id: "3",
          text: "提示",
          textnr: "确定申请查看对方的附件简历？",
        },
        {
          id: "8",
          text: "提示",
          textnr: "确认对方不合适",
        },
      ],
      upopupdata: {
        id: "",
        text: "",
        textnr: "",
      },
      upopupshowmiashi: false,
      Longitude: 0,
      Latitude: 0,
      objlist: {
        InterviewType: "0", //面试方式
        InterviewTime: "", //面试时间
        ProvinceCode: "", //省
        CityCode: "", //市
        AreaCode: "", //区
        PcaAddress: "",
        LinkManName: "", //联系人名称
        LinkManPhone: "", //联系人电话
        Address: "", //面试地址
        Longitude: "", //面试地点 经度
        Latitude: "", //面试地点 纬度
      },
    };
  },
  computed: {
    showConversation() {
      return !!this.conversation.conversationID;
    },
    tberlist() {
      let tberlistdata = [
        {
          id: 1,
          text: "微信",
          src: "/static/timimges/wxx.png",
          style: "width: 46rpx; height: 41.53rpx",
          typetext: 1,
        },
        {
          id: 2,
          text: "手机",
          src: "/static/timimges/shoji.png",
          style: "width: 35rpx; height: 40rpx;",
          typetext: 1,
        },
        {
          id: 3,
          text: "申请简历",
          src: "/static/timimges/shenqing.png",
          style: "width: 34rpx; height: 41rpx;",
          typetext: 1,
        },
        {
          id: 4,
          text: "邀请面试",
          src: "/static/timimges/jiqing.png",
          style: "width: 39rpx; height: 41rpx;",
          typetext: 1,
        },
        {
          id: 5,
          text: "录用TA",
          src: "/static/timimges/luyong.png",
          style: "width: 38rpx; height: 38rpx;",
          typetext: 1,
        },
        {
          id: 8,
          text: "不合适",
          src: "/static/timimges/jinyong.png",
          style: "width: 38rpx; height: 38rpx;",
          typetext: 1,
        },
        {
          id: 6,
          text: "附件简历",
          src: "/static/timimges/shenqing.png",
          style: "width: 34rpx; height: 41rpx;",
          typetext: 1,
        },
        {
          id: 7,
          text: "在线简历",
          src: "/static/timimges/shenqing.png",
          style: "width: 34rpx; height: 41rpx;",
          typetext: 1,
        },
      ];

      // 是否交换 附件 简历 0否 1是
      if (this.hlistdata.ExchangeResumeAttach === 0) {
        tberlistdata[2].typetext = 1;
        tberlistdata[6].typetext = 0;
      }
      // 是否交换简历 0否 1是
      else if (this.hlistdata.ExchangeResumeAttach === 1) {
        tberlistdata[2].typetext = 0;
        tberlistdata[6].typetext = 1;
      }
      if (this.hlistdata.Improper === 0) {
        tberlistdata[5].typetext = 1;
      } else {
        tberlistdata[5].typetext = 0;
      }
      return tberlistdata;
    },
  },
  created() {
    uni.$on("videoPlayerHandler", (value) => {
      this.videoPlay = value.isPlay;
      this.videoMessage = value.message;
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取地址信息
    this.huoquLongitude();
    // conversationID: C2C、 GROUP
    logger.log(
      ` TUI-chat | onLoad | conversationID: ${options.conversationID}`
    );
    const { conversationID } = options;
    this.setData({
      conversationID,
    });
    // #ifdef MP-WEIXIN
    // this.config = {
    // 	sdkAppID: app.globalData.SDKAppID,
    // 	userID: app.globalData.userInfo.userID,
    // 	userSig: app.globalData.userInfo.userSig
    // }
    // logger.log(`TUI-chat | TUICalling-config  | config:${JSON.stringify(this.callingConfig)}`);
    // // 挂载在 uni 上
    // uni.$wxTUICalling = this.$refs.TUICalling;
    // 		this.$nextTick(() => {
    // 			uni.$wxTUICalling.init()
    // })
    // #endif

    uni.$TUIKit.getConversationProfile(conversationID).then((res) => {
      const { conversation } = res.data;
      this.conversation = conversation;
      this.setData({
        conversationName: this.getConversationName(conversation),
        isShow: conversation.type === "GROUP",
      });
    });
  },
  mounted() {
    uni.$TUIKit
      .setMessageRead({
        conversationID: this.conversationID,
      })
      .then(() => {
        logger.log("TUI-chat | setMessageRead  | ok");
      });
    //求职记录
    this.getZhiwei(this.conversationID);
    // 收到新消息
    // uni.$TUIKit.on(uni.$TUIKitEvent.MESSAGE_RECEIVED, this.$onMessageReceived);
    this.$bus.$on("clickagree", this.clickagree);
    this.$bus.$on("clickrefuse", this.clickrefuse);
  },

  destroyed() {},
  // 页面卸载
  onUnload() {
    // #ifdef MP-WEIXIN
    //   this.$refs.TUICalling.destroyed();
    // #endif

    // 一定要解除相关的事件绑定
    // uni.$TUIKit.off(uni.$TUIKitEvent.MESSAGE_RECEIVED, this.$onMessageReceived);
    this.$bus.$off("clickagree", this.clickagree);
    this.$bus.$off("clickrefuse", this.clickrefuse);
  },
  methods: {
    // $onMessageReceived(e) {
    // 目前支持的消息对象包括：TIMTextElem(文本消息)，TIMLocationElem(位置消息)，TIMFaceElem(表情消息)，TIMCustomElem。
    // "TIMTextElem"
    // if (e.data[0].type == "TIMCustomElem") {
    //   let lisidst = this.conversationID.slice(3);
    //   const app = getApp();
    //   //查询求职记录
    //   this.$http.huirc
    //     .jobUserRecordget({
    //       userid: lisidst, //求职者
    //       jobuserid: app.globalData.user.UserId, //用户ID
    //     })
    //     .then((res) => {
    //       if (res.Result) {
    //         this.hlistdata = res.Result;
    //       }
    //     });
    // }
    // },
    youheadsculpture() {
      uni.navigateTo({
        url: `/pages/views/packageB/type-jobhunting/resume/preview?ids=${this.hlistdata.ResumeId}&typeshow=false`,
      });
    },
    myheadsculpture() {
      uni.navigateTo({
        url: `/pages/views/packageA/type-jobhunting/search/JobDetails?id=${this.hlistdata.JobId}`,
      });
    },
    //获取地址信息
    huoquLongitude() {
      let tabt = this;
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          tabt.Longitude = Math.abs(res.longitude);
          tabt.Latitude = Math.abs(res.latitude);
        },
      });
    },
    qingk() {
      // 清空单聊的本地及云端的消息
      let promise = uni.$TUIKit.clearHistoryMessage(this.conversationID);
      promise
        .then(function (imResponse) {
          // 清空消息成功
        })
        .catch(function (imError) {
          console.warn("clearHistoryMessage error:", imError); // 清空消息失败的相关信息
        });
    },
    vupopupshow(item) {
      if (item == 1) {
        this.upopupdata = this.upopupshowtext[0];
      } else if (item == 2) {
        this.upopupdata = this.upopupshowtext[1];
      } else if (item == 3) {
        this.upopupdata = this.upopupshowtext[2];
      } else if (item == 5) {
        this.upopupdata = {
          id: "4",
          text: "提示",
          textnr:
            "是否确认录用 " +
            this.hlistdata.UserName +
            " 担任" +
            this.hlistdata.JobName +
            " 一职，一经发出，不可撤回，请谨慎操作~",
        };
      } else if (item == 6) {
        let dataAttachs = this.hlistdata.ResumeInfo.Attachs;
        if (!this.hlistdata.ResumeAttachId) {
          this.$util.toast("没有同意附件简历");
          return;
        }
        if (dataAttachs.length > 0) {
          let attachslist = "";
          dataAttachs.forEach((res) => {
            if (this.hlistdata.ResumeAttachId == res.Id) {
              attachslist = res;
            }
          });
          if (attachslist) {
            let ures = this.URL + attachslist.FilePath;
            console.log(ures);
            console.log(attachslist);
            uni.navigateTo({
              url: `/pages/views/packageB/type-jobhunting/previewFile?src=${ures}&title=${attachslist.Title}`,
            });
          }
        }
      } else if (item == 7) {
        uni.navigateTo({
          url: `/pages/views/packageB/type-jobhunting/resume/preview?ids=${this.hlistdata.ResumeId}&typeshow=false`,
        });
      } else if (item == 8) {
        this.upopupdata = this.upopupshowtext[3];
      }
      if (item != 6) {
        if (item != 7) {
          if (item == 4) {
            this.upopupshowmiashi = true;
            this.objlist = {
              InterviewType: "0", //面试方式
              InterviewTime: "", //面试时间
              ProvinceCode: "", //省
              CityCode: "", //市
              AreaCode: "", //区
              PcaAddress: "",
              LinkManName: "", //联系人名称
              LinkManPhone: "", //联系人电话
              Address: "", //面试地址
              Longitude: "", //面试地点 经度
              Latitude: "", //面试地点 纬度
            };
          } else {
            this.upopupshow = true;
          }
        }
      }
    },
    //求职记录-单条查询
    getZhiwei(item, type) {
      let lisidst = item.slice(3);
      //CorpId 企业ID  JobUserId职位发布者ID
      const app = getApp();
      this.$http.huirc
        .jobUserRecordget({
          userid: lisidst, //求职者
          jobuserid: app.globalData.user.UserId, //用户ID
        })
        .then((res) => {
          if (res.Result) {
            this.hlistdata = res.Result;
            if (type != 2) {
              this.setConveromData();
            }
            if (res.Result.HasChat === 0) {
              this.Senddefault();
            }
          }
        });
    },
    //更新自定义会话数据
    setConveromData() {
      const recordInfo = this.hlistdata;
      uni.$TUIKit
        .setConversationCustomData({
          conversationIDList: [this.conversationID],
          customData: JSON.stringify({
            PositionName: recordInfo.ResumeInfo?.PositionName,
            MaxWage: recordInfo.ResumeInfo.JobExpectList[0].MaxWage,
            MinWage: recordInfo.ResumeInfo.JobExpectList[0].MinWage,
            Negotiable: recordInfo.ResumeInfo.JobExpectList[0].Negotiable,
            EduDegreeStr: recordInfo.ResumeInfo.EducationExps[0]?.EduDegreeStr,
          }),
        })
        .catch((imError) => {
          console.warn("setConversationCustomData error:", imError);
        });
    },

    //发送 默认信息
    Senddefault() {
      let that = this;
      // 公司
      this.$http.core.phrases_corpfault().then((res) => {
        if (res.Success) {
          let textd = res.Message;
          if (textd) {
            that.textsendesage(textd);
          }
        }
      });
    },
    textsendesage(Content) {
      let that = this;
      if (this.showChat) {
        setTimeout(() => {
          console.log("textsendesage", this.$refs.messageInput);
          that.$nextTick(() => {
            that.$refs.messageInput.sendTextMessage(Content, true);
          });
        }, 500);
      }
    },

    // 同意
    clickagree(e) {
      if (e.payload.data == "job-interview-result") {
        this.jobinterviewresult(e);
      }
    },
    // 拒绝
    clickrefuse() {},
    //录用通知确定
    jobinterviewresult(e) {
      this.$http.huirc
        .employadd({
          UserId: this.hlistdata.UserId, //求职者用户ID
          JobId: this.hlistdata.JobId, //职位ID
        })
        .then((res) => {
          if (res.Success) {
            // this.systemtexttips("已确定录用");
            const ext = JSON.parse(e.payload.extension);
            ext.HasEmploy = 1;
            e.payload.extension = JSON.stringify(ext);
            // 修改 当前状态
            uni.$TUIKit.modifyMessage(e);
          }
        });
    },
    //申请手机号
    shenqingphont(e) {
      this.$http.huirc
        .jobUserRecordup({
          ...this.hlistdata,
          ExchangePhone: 1,
        })
        .then((res) => {
          if (res.Success) {
            e.payload.extension.ExchangePhone = 1;
            e.payload.extension = JSON.stringify(e.payload.extension);
            uni.$TUIKit.modifyMessage(e);
          }
        });
    },
    clickbut(item) {
      this.upopupshowmiashi = false;
      let da = {};
      if (item.InterviewType != 0) {
        da = {
          UserId: this.hlistdata.UserId, //求职者id
          JobId: this.hlistdata.JobId, //职位id
          ResumeId: this.hlistdata.ResumeId, //简历Id
          InterviewType: item.InterviewType, //面试方式
          InterviewTime: item.InterviewTime, //面试时间
          LinkManName: item.LinkManName, //联系人名称
          LinkManPhone: item.LinkManPhone, //联系人电话
        };
      } else {
        da = {
          UserId: this.hlistdata.UserId, //求职者id
          JobId: this.hlistdata.JobId, //职位id
          ResumeId: this.hlistdata.ResumeId, //简历Id
          InterviewType: item.InterviewType, //面试方式
          InterviewTime: item.InterviewTime, //面试时间
          ProvinceCode: item.ProvinceCode, //省
          CityCode: item.CityCode, //市
          AreaCode: item.AreaCode, //区
          Address: item.Address, //面试地址
          LinkManName: item.LinkManName, //联系人名称
          LinkManPhone: item.LinkManPhone, //联系人电话
          Longitude: item.Longitude, //面试地点 经度
          Latitude: item.Latitude, //面试地点 纬度
        };
      }
      if (item) {
        // 添加面试邀请
        this.$http.huirc
          .interviewadd(da)
          .then((res) => {
            console.log(res);
            if (res.Success) {
              this.fasongyaoqing(res.Result);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    //发送邀请
    fasongyaoqing(item) {
      this.$refs.messageInput.$handleSendCustomMessage({
        detail: {
          payload: {
            data: "job-interview",
            description: "职位面试邀请",
            extension: JSON.stringify({
              Id: item.Id, //面试邀请ID
              JobId: item.JobId, //职位ID
              JobName: item.JobName, //职位名称
              UserId: item.UserId, //求职者ID
              ResumeId: item.ResumeId, //简历ID
              InterviewState: 0, //0待接受 1已接受 2已拒绝
              InterviewTime: item.InterviewTime, //面试时间
              JobUserId: item.JobUserId, //职位发布者ID
              Notes: item.Notes, //面试通知内容
            }),
          },
        },
      });
    },
    // 确定
    upopupclick() {
      this.upopupshow = false;
      let senderid = this.conversationID.slice(3);
      if (this.upopupdata.id == 1) {
        this.$refs.messageInput.$handleSendCustomMessage({
          detail: {
            payload: {
              data: "exchange-wechat",
              description: "交换微信",
              extension: JSON.stringify({
                JobId: this.hlistdata.JobId, //职位ID
                JobName: this.hlistdata.JobName, //职位名称
                UserId: this.hlistdata.UserId, //求职者ID
                JobUserId: this.hlistdata.JobUserId, //职位发布者ID
                UserName: this.hlistdata.UserName, //求职者名称
                ExchangeWechat: this.hlistdata.ExchangeWechat, //交换微信0 否 1是
                UserWechat: this.hlistdata.ResumeInfo.WeixinNo, //求职者微信
                senderId: senderid, //对方聊天人id
              }),
            },
          },
        });
      } else if (this.upopupdata.id == 2) {
        this.$refs.messageInput.$handleSendCustomMessage({
          detail: {
            payload: {
              data: "exchange-phone", //字段作为表示，可以自定义
              description: "交换手机号",
              extension: JSON.stringify({
                JobId: this.hlistdata.JobId, //职位ID
                JobName: this.hlistdata.JobName, //职位名称
                UserId: this.hlistdata.UserId, //求职者ID
                JobUserId: this.hlistdata.JobUserId, //职位发布者ID
                UserName: this.hlistdata.UserName, //求职者名称
                ExchangePhone: this.hlistdata.ExchangePhone, //交换电话0 否 1是
                UserPhoneNumber: this.hlistdata.UserPhoneNumber, //求职者电话
                senderId: senderid, ////对方聊天人id
              }),
            },
          },
        });
      } else if (this.upopupdata.id == 3) {
        this.$refs.messageInput.$handleSendCustomMessage({
          detail: {
            payload: {
              data: "exchange-resume",
              description: "交换附件简历",
              extension: JSON.stringify({
                JobId: this.hlistdata.JobId, //职位ID
                JobName: this.hlistdata.JobName, //职位名称
                UserId: this.hlistdata.UserId, //求职者ID
                JobUserId: this.hlistdata.JobUserId, //职位发布者ID
                ExchangeResumeAttach: 0, //是否交换简历附件 0否 1是
                senderId: senderid, //对方聊天人id
              }),
            },
          },
        });
      } else if (this.upopupdata.id == 4) {
        if (this.hlistdata.HasEmploy === 1) {
          this.$util.toast("已经录用了");
          return;
        }
        this.$refs.messageInput.$handleSendCustomMessage({
          detail: {
            payload: {
              data: "job-employ",
              description: "职位录用通知",
              extension: JSON.stringify({
                Id: this.hlistdata.Id, //面试邀请ID
                JobId: this.hlistdata.JobId, //职位ID
                JobName: this.hlistdata.JobName, //职位名称
                UserId: this.hlistdata.UserId, //求职者ID
                JobUserId: this.hlistdata.JobUserId, //职位发布者ID
                Desc:
                  this.hlistdata.UserName +
                  "，您好，经过面试公司觉得你很不错，现已录用你！",
                HasEmploy: 0,
              }),
            },
          },
        });
      } else if (this.upopupdata.id == 8) {
        this.$http.huirc
          .inappropriate({
            CorpUserId: this.hlistdata.JobUserId, //招聘者Id
            JobId: this.hlistdata.JobId, //职位Id
            UserId: this.hlistdata.UserId, //求职者Id
          })
          .then((res) => {
            if (res.Success) {
              //求职记录
              this.getZhiwei(this.conversationID);
            }
          });
      }
    },
    //=======================
    stopVideoHander() {
      this.videoPlay = false;
    },
    getConversationName(conversation) {
      if (conversation.type === "@TIM#SYSTEM") {
        this.setData({
          showChat: false,
        });
        return "系统通知";
      }
      if (conversation.type === "C2C") {
        return (
          conversation.remark ||
          conversation.userProfile.nick ||
          conversation.userProfile.userID
        );
      }
      if (conversation.type === "GROUP") {
        return (
          conversation.groupProfile.name || conversation.groupProfile.groupID
        );
      }
    },
    sendMessage(event) {
      // 将自己发送的消息写进消息列表里面
      this.$refs.messageList.updateMessageList(event.detail.message);
    },
    triggerClose() {
      if (this.showChat) {
        this.$refs.messageInput.handleClose();
      }
    },
    goBack() {
      const pages = getCurrentPages(); // 当前页面栈
      if (
        pages[pages.length - 2].route ===
          "pages/TUI-Conversation/create-conversation/create" ||
        pages[pages.length - 2].route ===
          "pages/TUI-Group/create-group/create" ||
        pages[pages.length - 2].route === "pages/TUI-Group/join-group/join"
      ) {
        uni.navigateBack({
          delta: 2,
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
      uni.$TUIKit
        .setMessageRead({
          conversationID: this.conversationID,
        })
        .then(() => {});
    },
  },
};
</script>

<style>
@import "./chat.css";
</style>


<style lang="scss" scoped>
.upopupshownr {
  padding: 40rpx 60rpx;
  text-align: center;
  width: 550rpx;

  .upopupshownrtop {
    font-weight: bold;
    font-size: 32rpx;
  }

  .upopupshownrtext {
    padding: 60rpx 0rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .upopupshownrbut {
    padding-top: 40rpx;
    display: flex;
    justify-content: space-around;

    .upopupnrbut1 {
      border: 1px solid #a0a0a0;
      display: inline-block;
      padding: 20rpx 60rpx;
      border-radius: 10rpx;
      font-size: 26rpx;
      color: #999999;
    }

    .upopupnrbut2 {
      display: inline-block;
      padding: 20rpx 60rpx;
      border-radius: 10rpx;
      font-size: 26rpx;
      background-color: #1684fc;
      color: #ffffff;
    }
  }
}
</style>